<template>
  <div class="profile-container">
    <h2>个人资料</h2>
    <div class="profile-content">
      <div class="profile-header">
        <div class="avatar-container">
          <div class="avatar">AD</div>
          <button class="change-avatar-btn">更换头像</button>
        </div>
        <div class="user-info-basic">
          <h3>{{ userInfo.username }}</h3>
          <p class="user-role">{{ userInfo.role === 'admin' ? '管理员' : '普通用户' }}</p>
          <p class="user-email">{{ userInfo.email }}</p>
        </div>
      </div>
      
      <div class="profile-details">
        <h3>基本信息</h3>
        <form @submit.prevent="updateProfile">
          <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" v-model="formData.username" disabled>
          </div>
          
          <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" v-model="formData.email">
          </div>
          
          <div class="form-group">
            <label for="nickname">昵称</label>
            <input type="text" id="nickname" v-model="formData.nickname">
          </div>
          
          <div class="form-group">
            <label for="bio">个人简介</label>
            <textarea id="bio" v-model="formData.bio" rows="4"></textarea>
          </div>
          
          <div class="form-group">
            <label for="phone">联系电话</label>
            <input type="tel" id="phone" v-model="formData.phone">
          </div>
          
          <div class="form-actions">
            <button type="button" class="cancel-btn" @click="cancelEdit">取消</button>
            <button type="submit" class="save-btn">保存更改</button>
          </div>
        </form>
      </div>
      
      <div class="security-section">
        <h3>账户安全</h3>
        <div class="security-options">
          <button class="security-btn" @click="showChangePassword = true">修改密码</button>
          <button class="security-btn">绑定手机</button>
          <button class="security-btn">绑定微信</button>
          <button class="security-btn">双因素认证</button>
        </div>
      </div>
    </div>
    
    <!-- 修改密码弹窗 -->
    <div v-if="showChangePassword" class="modal-overlay">
      <div class="modal-content">
        <div class="modal-header">
          <h4>修改密码</h4>
          <button class="close-btn" @click="showChangePassword = false">×</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="changePassword">
            <div class="form-group">
              <label for="currentPassword">当前密码</label>
              <input type="password" id="currentPassword" v-model="passwordForm.currentPassword">
            </div>
            <div class="form-group">
              <label for="newPassword">新密码</label>
              <input type="password" id="newPassword" v-model="passwordForm.newPassword">
              <p class="password-hint">密码长度至少8位，包含字母和数字</p>
            </div>
            <div class="form-group">
              <label for="confirmPassword">确认新密码</label>
              <input type="password" id="confirmPassword" v-model="passwordForm.confirmPassword">
            </div>
            <div class="form-actions">
              <button type="button" class="cancel-btn" @click="showChangePassword = false">取消</button>
              <button type="submit" class="save-btn">修改密码</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  name: 'Profile',
  setup() {
    // 用户信息
    const userInfo = reactive({
      username: 'admin',
      email: 'admin@example.com',
      role: 'admin',
      nickname: '管理员',
      bio: '这是管理员账户',
      phone: '13800138000'
    })
    
    // 表单数据（用于编辑）
    const formData = reactive({
      username: userInfo.username,
      email: userInfo.email,
      nickname: userInfo.nickname,
      bio: userInfo.bio,
      phone: userInfo.phone
    })
    
    // 密码表单
    const passwordForm = reactive({
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
    
    // 修改密码弹窗控制
    const showChangePassword = ref(false)
    
    // 更新个人资料
    const updateProfile = () => {
      // 将表单数据更新到用户信息中
      Object.assign(userInfo, { ...formData })
      // 这里可以添加API调用逻辑
      alert('个人资料已更新')
    }
    
    // 取消编辑
    const cancelEdit = () => {
      // 重置表单数据为当前用户信息
      Object.assign(formData, { ...userInfo })
    }
    
    // 修改密码
    const changePassword = () => {
      // 验证新密码和确认密码是否一致
      if (passwordForm.newPassword !== passwordForm.confirmPassword) {
        alert('新密码和确认密码不一致')
        return
      }
      
      // 这里可以添加API调用逻辑
      alert('密码已更新')
      showChangePassword.value = false
      
      // 重置密码表单
      Object.keys(passwordForm).forEach(key => {
        passwordForm[key] = ''
      })
    }
    
    return {
      userInfo,
      formData,
      passwordForm,
      showChangePassword,
      updateProfile,
      cancelEdit,
      changePassword
    }
  }
}
</script>

<style scoped>
.profile-container {
  padding: 20px;
}

h2 {
  margin-bottom: 24px;
  color: #333;
}

.profile-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.profile-header {
  display: flex;
  padding: 24px;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #1890ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
}

.change-avatar-btn {
  padding: 6px 12px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.user-info-basic h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #333;
}

.user-role {
  background-color: #e6f7ff;
  color: #1890ff;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin: 0 0 8px 0;
}

.user-email {
  color: #666;
  margin: 0;
}

.profile-details,
.security-section {
  padding: 24px;
}

.profile-details h3,
.security-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
  font-size: 18px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-size: 14px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-group input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.cancel-btn,
.save-btn {
  padding: 8px 16px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.cancel-btn {
  background-color: white;
  color: #666;
}

.save-btn {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

.cancel-btn:hover {
  border-color: #40a9ff;
  color: #1890ff;
}

.save-btn:hover {
  background-color: #40a9ff;
}

.security-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.security-btn {
  padding: 12px;
  background-color: white;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.security-btn:hover {
  border-color: #40a9ff;
  color: #1890ff;
}

.password-hint {
  font-size: 12px;
  color: #999;
  margin: 6px 0 0 0;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-header h4 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #333;
}

.modal-body {
  padding: 24px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    text-align: center;
  }
  
  .security-options {
    grid-template-columns: 1fr;
  }
}
</style>